import { useEffect, useState } from "react";
import { FC } from "react";
import { observer, inject } from "mobx-react";
import { Layout, Menu, Row, Col, Space, MenuProps } from "antd";
import { Link, Outlet } from "react-router-dom";
import { ITStore } from "../store";
import Langbox from "../pages/components/Langbox";
import UserHead from "./User/UserHead";
// import Logo from "../assets/images/logo.png";

type TProp = {
  store: ITStore;
};
type MenuItem = Required<MenuProps>["items"][number];
const { Header, Footer } = Layout;

const getItem = (
  label: React.ReactNode,
  key?: React.Key | null,
  icon?: React.ReactNode,
  children?: MenuItem[],
  type?: "group"
): MenuItem => {
  return {
    key,
    icon,
    children,
    label,
    type,
  } as MenuItem;
};

const Applayout: FC<TProp | any> = ({ store }: TProp): JSX.Element => {
  const {
    globalStore: { menu },
    dictionaryStore: { getFullDict },
    languageStore: { getAllLanguage, lang, changeLangCur },
    userStore: { getUserInfo },
  } = store;

  const [menuList, setMenuList] = useState<MenuItem[]>([]);

  useEffect(() => {
    const userInfo = getUserInfo();
    const { privilege } = userInfo || {};

    let tempMenu: MenuItem[] = [];
    menu.forEach((item) => {
      const { icon, value, langkey, hasSub, children, path } = item;
      if (value === "setting" && privilege !== "admin") {
        return false
      }
      let parentLabel: any = lang[langkey];
      if (path) {
        parentLabel = <Link to={path}>{lang[langkey]}</Link>;
      }
      let tempItem = getItem(parentLabel, value, icon);
      if (hasSub) {
        let tempChildren: MenuItem[] = [];
        children?.forEach((sItem) => {
          let label: any = lang[sItem.langkey];
          if (sItem.path) {
            label = <Link to={sItem.path}>{lang[sItem.langkey]}</Link>;
          }
          tempChildren.push({
            label,
            key: sItem.value,
            icon: sItem.icon,
          });
        });
        tempItem = getItem(lang[langkey], value, icon, tempChildren);
      }
      tempMenu.push(tempItem);
    });

    setMenuList(tempMenu);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [menu, lang]);

  useEffect(() => {
    const getData = async () => {
      // 请求所有语言
      await getAllLanguage(false);

      // 请求所有字典和值
      await getFullDict(false);
    };

    let currentLang = localStorage.getItem("lang") || "en";
    changeLangCur(currentLang);

    getData();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <Layout>
      <Header style={{ background: "#fff" }}>
        <Row>
          <Col flex="240px">
            {/* <img src={Logo} alt="组波智能化学合成设计" width="210" height="56" /> */}
          </Col>
          <Col flex="auto">
            <Menu mode="horizontal" items={menuList} selectedKeys={[]} />
          </Col>
          <Col flex="auto">
            <Space style={{ float: "right" }}>
              <div className="headbox">
                <UserHead />
              </div>
              <div className="langbox">
                <Langbox />
              </div>
            </Space>
          </Col>
        </Row>
      </Header>
      <Outlet />
      <Footer className="footer" />
    </Layout>
  );
};

export default inject("store")(observer(Applayout));
